<template>
	<view>
		<!-- 导航 -->
		<view class="nav">
			<view class="nav-bar" @click="toggle(1)">
				<view class="nav-bar-text" :class="orderstype==0 || orderstype==1 || orderstype==2?'nav-bar-text-active':''">
					进行中
				</view>
				<view class="nav-bar-line" :class="orderstype==0 || orderstype==1 || orderstype==2?'nav-bar-line-active':''"></view>
			</view>
			<view class="nav-bar" @click="toggle(3)">
				<view class="nav-bar-text" :class="orderstype==3||orderstype==4?'nav-bar-text-active':''">
					历史
				</view>
				<view class="nav-bar-line" :class="orderstype==3||orderstype==4?'nav-bar-line-active':''"></view>
			</view>
			<view class="nav-bar" @click="toggle(5)">
				<view class="nav-bar-text" :class="orderstype==5?'nav-bar-text-active':''">
					退单
				</view>
				<view class="nav-bar-line" :class="orderstype==5?'nav-bar-line-active':''"></view>
			</view>
		</view>
		<!-- 导航 -->
		
		<!-- 没有订单显示背景及链接按钮 -->
		<view class="no-orders" v-if="searchordersList.length<=0">
			<view class="no-orders-bg">
				<image src="http://www.itlaobing.com/ice/other/ordersbg.png"></image>
			</view>
			<view class="no-orders-text">
				您还没有订单，快去选一杯喜欢的饮品吧~
			</view>
			<view class="no-orders-btn" @click="toOrders">
				去喝一杯
			</view>
		</view>
		<!-- 没有订单显示背景及链接按钮 -->
		
		<!-- 订单列表 -->
		<view class="orderlist">
			<view class="orderlist-item" v-for="(item,index) in searchordersList" :key="index" @click="toOrderDetail(item)">
				<view class="orderlist-item-top">
					<view class="orderlist-item-top-shopname" @click.stop="toFoods(item)">{{item.shop.sname}}<uni-icons type="forward" size="18" color="#444444"></uni-icons>
</view>
					<view :class="item.orderstatus<3?'orderlist-item-top-status1':'orderlist-item-top-status2'">{{item.orderstatusStr}}</view>
				</view>
				<view class="orderlist-item-goods">
					<view class="orderlist-item-goods-v" v-for="(goods,sindex) in item.goods" :key="sindex">
						<image :src="goods.icon" class="orderlist-item-goods-img"></image>
					</view>
				</view>
				<view class="orderlist-item-bottom">
					<view class="orderlist-item-bottom-text">{{item.ordertime}}</view>
					<view  class="orderlist-item-bottom-text" v-if="item.orderstatus==1 || item.orderstatus==2 ||item.orderstatus==3 ">取餐号码：{{item.takeCode}}</view>
					<view style="display: flex;">
						<text  class="orderlist-item-bottom-text">共{{item.buyTotalNums}}件</text><text class="orderlist-item-bottom-totalprice">￥{{item.allPrice}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单列表 -->
	</view>
</template>

<script>
	const app = getApp()
	export default {
		data() {
			return {
				orderstype: 1, //1.进行中 3.历史 5.退单
				ordersList:[],
				searchordersList:[],
				optiontype: 1 //1.消费者 2.工作人员 3.超级管理员
			}
		},
		onLoad(params){
			if(params.orderstype!=undefined && params.orderstype!=null){
				this.orderstype = params.orderstype
			}
			if(params.optiontype!=undefined && params.optiontype!=null){
				this.optiontype = params.optiontype
			}
			// 获得订单信息
			this.getOrdersList()
		},
		methods: {
			getOrdersList(){
				// 获得订单信息
				uni.request({
					url: app.globalData.baseUrl + '/orders/getorderslist/'+app.globalData.cid,
					success: (result) => {
						// console.log(result.data.data)
						if (result.data.statusCode == 200 && result.data.mydata !=null) {
							this.ordersList = result.data.mydata.reverse()
							this.toggle(this.orderstype)
						}
					}
				})
			},
			timeinit(curOrder) {
					var date = new Date();
					var now = date.getTime(); 
					var startTimeStr = curOrder.ordertime
					var startTime = new Date(startTimeStr).getTime() //获得当前时间与1970年1月1日时间相差的毫秒数
					var endTime = startTime + 1000 * 60 * 30; //结束时间与1970年1月1日时间相差的毫秒数 + 30分钟
					var leftTime = endTime - now; //计算两日期之间相差的毫秒数
					var myLeftTime = {}
					if (leftTime >= 0) 
					   return true
					else return false
					
			},
			toggle(orderstype){
				this.orderstype = orderstype
				if(orderstype==1){//显示状态值为 0.待支付 1.已支付 2.制作中  的数据
					this.searchordersList = this.ordersList.filter(item=>item.orderstatus<=2)
					// 如果有待支付订单，看看是否支付时间超时，如果有订单取消
					this.searchordersList.forEach(item=>{
						if(item.orderstatus==0){
							if(!this.timeinit(item)){
								item.orderstatus = 4
								item.orderstatusStr = "已取消"
								item.paytime = ""
								item.takeCode = -1
								// 更新订单
								uni.request({
									url: app.globalData.baseUrl + '/orders/updateorders',
									method: 'POST',
									data: item,
									success: (result) => {
										
									}
								})
							}
						}
					})
				}
				else if(orderstype==3 || orderstype==4){
					this.searchordersList = this.ordersList.filter(item=>( item.orderstatus==3 || item.orderstatus==4))
				}
				else{
					this.searchordersList = this.ordersList.filter(item=> item.orderstatus==5)
				}
			},
			toOrders(){
				uni.switchTab({
					url:"../shops/shops"
				})
			},
			//转向购物页面并带走门店sid
			toFoods(item){
				uni.navigateTo({
					url:"../foods/foods?sid="+item.shop.sid
				})
			},
			toOrderDetail(item){
				if(this.optiontype==1){
					uni.navigateTo({
						url:"../orderdetail/orderdetail?orderid="+item.orderid
					})
				}else if(this.optiontype==2){ //工作人员
					uni.navigateTo({
						url:"../adminorderdetail/adminorderdetail?orderid="+item.orderid
					})
				}
			}
		}
	}
</script>

<style lang="scss">
.nav{
	width: 100vw; //viewpoint width
	height: 60rpx;
	background-color: #FFFFFF;
	display: flex;
	justify-content: space-around;
	position: sticky;
	top: var(--window-top);
	z-index: 10;
	
	.nav-bar{
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
		
		.nav-bar-text{
			color: #777777;
			font-size: 30rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
		}
		.nav-bar-text-active{
			color: #333333;
		}
		.nav-bar-line{
			width: 62rpx;
			height: 6rpx;
		}
		.nav-bar-line-active{
			width: 62rpx;
			height: 6rpx;
			background-color: #FF0000;
		}
	}
}

.no-orders{
	width: 80vw;
	height: 650rpx;
	margin: 0rpx auto;
	margin-top: 100rpx;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	
	.no-orders-bg{
		width: 100%;
	}
	.no-orders-text{
		color: #777777;
		font-size: 28rpx;
	}
	.no-orders-btn{
		width: 240rpx;
		height: 80rpx;
		background-color: #E60012;
		color: #FFFFFF;
		line-height: 80rpx;
		border-radius: 10rpx;
	}
}

.orderlist{
	width: 93vw;
	height: auto;
	margin: 20rpx auto;
	
	.orderlist-item{
		width: 100%;
		height: 270rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 15rpx;
		box-sizing: border-box;
		padding: 20rpx;
		
		.orderlist-item-top{
			width: 100%;
			height: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.orderlist-item-top-shopname{
				color: #444444;
				font-size: 28rpx;
				display: flex;
				align-items: center;
			}
			.orderlist-item-top-status1{
				color: #E60012;
				font-size: 28rpx;
			}
			.orderlist-item-top-status2{
				color: #AAAAAA;
				font-size: 28rpx;
			}
		}
		
		.orderlist-item-goods{
			width: 100%;
			height: 150rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;
			align-items: center;
			
			.orderlist-item-goods-v{
				width: 110rpx;
				height: 120rpx;
				
				.orderlist-item-goods-img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.orderlist-item-bottom{
			width: 100%;
			height: 35rpx;
			display: flex;
			justify-content: space-between;
			
			.orderlist-item-bottom-text{
				color: #BBBBBB;
				font-size: 22rpx;
			}
			.orderlist-item-bottom-totalprice{
				font-size: 26rpx;
				color:#444444 ;
			}
		}
	}
}
</style>
